<%@ page pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
 String path=request.getContextPath();
%>
<html lang="en">
<head>
    <c:url var="base" value="/"/>
    <base href="${base}">
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            text-decoration: none;
        }
        header,article,footer{
            width: 800px;
            margin: 0 auto;
        }
        article{
            border: solid 1px #666666;
            background-color: seashell;
            padding: 10px;
        }
        a{
            text-decoration: none;
            color: black;
        }
        #dd{
            font-family: "Bernard MT Condensed";
            font-size: 30px;
        }
        header .top{
            display: flex;
            width: 800px;
            justify-content: space-between;
            height: 100px;
            align-items: center;
        }
        nav{
            background-color: cadetblue;
            height: 40px;
            display: flex;
            position: relative;
            z-index: 50;
        }
        nav div{
            flex: 1;
            text-align: center;
            height: 40px;
            line-height: 40px;
            display: inline-block;
            align-items: center;
        }
        nav a{
            color: black;
            display: block;
        }
        nav ul{
            list-style-type: none;
            margin: 0;
            padding: 0;
            background-color: #dbedf5;
            display: none;
        }
        nav div>a{
            color: white;
        }
        nav a:hover{
            color: white;
            background-color: #ff421c;
        }
        nav div:hover ul{
            display: block;
        }
        .goods{
            width: 700px;
            margin: 30px auto;
        }
        .goods legend{
            text-align: center;
        }
        .goods img{
            width: 150px;
            height: 150px;
        }
        .goods .a{
            display: flex;
            justify-content: center;
            margin: 20px 0;
        }
        .goods .a div{
            margin-right:5px;
        }
        .goods .b{
            font-size: 13px;
            text-align: right;
        }
        .goods .a .k{
            width: 150px;
            height: 150px;
            background-color: rgba(180,70,70,0.5);
            text-align: center;
            line-height: 150px;
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
        .goods .a .k a{
            color: white;
            display: block;
        }
        .goods .a .m{
            position: relative;
        }
        .goods .a .m:hover .k{
            display: block;
        }


        .artl  .b{
            display: flex;
            justify-content: space-between;
        }
        .artl .a{
            display: flex;
        }
        .artl .a .b{
            display: block;
            width: 300px;
            height: 250px;
            margin: 20px 30px;
        }
        .artl .a{
            justify-content: center;
        }
        .artl .a .b .h a{
            display: block;
            margin: 10px 0px;
        }
        .artl .a .b .h a:hover{
            color: blue;
        }
        .artl {
            border-bottom-color: black;
            border: solid 1px;
            width: 700px;
            height: 285px;
            margin: 30px auto;
        }
        .box{
            border: solid 1px;
            border-bottom-color: black;
            width: 700px;
            height: 320px;
            margin: 0 auto;
        }
        .box .d3{
            width: 500px;
            margin: 0 auto;
            padding: 15px 0;
        }
        .d3 .tt{
            text-align: center;
            margin-bottom: 5px;
        }
        .area{
            position: relative;
        }
        #circle{
            display: flex;
            position: absolute;
            right: 10px;
            bottom: 10px;
        }
        #circle div{
            width: 15px;
            height: 15px;
            border: solid 1px #666666;
            border-radius: 50%;
            background-color: white;
            margin: 5px;
        }
        #circle div.cur{
            background-color: green;
        }
        .footer{
            margin: 0 auto;
            border: solid 2px black;
            background-color: cadetblue;
            height: 50px;
            width: 800px;
            display: flex;
            position: relative;
        }
        .footer .text {
            margin: 0 auto;
        }
    </style>
    <title>东北林业大学</title>
</head>
<body>
<header>
    <div class="top">
        <span><a href="https://www.nefu.edu.cn/" target="_blank"><img src="imgs/7.jpeg" width="300px" height="100px"></a></span>
        <span id="dd">软件工程</span>
    </div>
    <nav>
        <div><a href="#">首页</a>
        </div>
        <div><a href="#">专业介绍</a>
            <ul>
                <li><a href="jieshao">专业简介</a> </li>
                <li><a href="#">方向简介</a> </li>
            </ul>
        </div>
        <div><a href="#">实验室</a>
            <ul>
                <li><a href="923实验室">923实验室</a> </li>
                <li><a href="#">925实验室</a></li>
                <li><a href="#">923实验室</a> </li>
            </ul>
        </div>
        <div><a href="#">教师团队</a>
            <ul>
                <li><a href="#">教授团队</a> </li>
                <li><a href="#">副教授团队</a></li>
                <li><a href="#">讲师团队</a> </li>
            </ul>
        </div>
        <div><a href="#">就业指南</a>
        </div>
        <div><a href="#">新闻</a>
            <ul>
                <li><a href="delex">删除新闻</a> </li>
                <li><a href="addx">增加新闻</a></li>
                <li><a href="queryx">查询新闻</a> </li>
            </ul>
        </div>
        <div><a href="#">公告</a> </div>
    </nav>
</header>
<article>
    <div>
        <fieldset class="goods">
            <legend>东北林大软件工程</legend>
            <div class="a">
                <div class="m"><img src="imgs/1.jpeg" >
                    <div class="k"><a href="https://jwc.nefu.edu.cn/" target="_blank">教务处</a> </div>
                </div>
                <div class="m"><img src="imgs/2.jpeg" >
                    <div class="k"><a href="https://jwc.nefu.edu.cn/" target="_blank">教务处</a> </div>
                </div>
                <div class="m"><img src="imgs/3.jpeg" >
                    <div class="k"><a href="https://jwc.nefu.edu.cn/" target="_blank">教务处</a> </div>
                </div>
                <div class="m"><img src="imgs/4.jpeg" >
                    <div class="k"><a href="https://jwc.nefu.edu.cn/" target="_blank">教务处</a> </div>
                </div>
            </div>
            <div class="b"><a href="https://jwc.nefu.edu.cn/" target="_blank">进入东北林业大学教务处&gt&gt</a> </div>
        </fieldset>
    </div>
    <div class="artl">
        <div class="a">
            <div class="b">
                <h4>专业介绍</h4><hr>
                <p> 软件工程是一门研究用工程化方法构建和维护有效、实用和高质量的软件的学科。它涉及程序设计语言、数据库、软件开发工具、系统平台、标准、
                    设计件有电子邮件、嵌入式系统、人机界面、办公套件、操作系统、编译器、数据库、游戏等。同时，各个行业几乎都有计算机软件的应用，
                    如工业、农业、银行、航空、政府部门等。这些应用促进了经济和社会的发展，也提高了工作效率和生活效率。</p>
            </div>
            <div class="b">
                <h4>新闻公告</h4><hr>
                <div class="h">
                    <ul>
                        <c:forEach items="${xinwens}" var="x" varStatus="v">
                            <li>
                                <a href="${x.link}" target="_blank" title="${x.name}">${x.name}</a>
                            </li>
                        </c:forEach>

                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="box">
        <div class="d3">
            <div id="tt" class="tt">主楼</div>
            <div class="area">
                <img id="lb" src="imgs/9.jpeg" width="500px" height="250px">
                <div  id="circle" class="circle"></div>
            </div>
        </div>
    </div>
    <script>
        var imgs =[
            {title:"主楼", name:"imgs/9.jpeg"},
            {title:"成栋楼", name:"imgs/10.jpeg"},
            {title:"知园", name:"imgs/11.jpg"},
            {title:"图书馆", name:"imgs/12.jpeg"}
        ];
        var cur=0;
        var fID;
        function lb(){
            cur++;
            cur=cur%4;
            document.getElementById("tt").innerText=imgs[cur].title;
            document.getElementById("lb").src=imgs[cur].name;
            setCircle();
        }
        fID=setInterval("lb()",3000);
        function setCircle(){
            var s="";
            for(var i in imgs){
                if(i==cur)
                {
                    s+='<div class="cur" onclick="changeImg('+i+')"></div>';
                }
                else
                {  s+='<div onclick="changeImg('+i+')"></div>';}
            }
            document.getElementById("circle").innerHTML = s;
        }
        setCircle();
        function changeImg(k){
            clearInterval(fID);
            cur = k;
            document.getElementById("tt").innerText=imgs[cur].title;
            document.getElementById("lb").src=imgs[cur].name;
            setCircle();
            fID=setInterval("lb()",3000);
        }
    </script>
</article>
<footer>
    <div class="footer">
        <div class="text">
            <p>东北林业大学<br>
                软件工程专业 2046&copy;</p>
        </div>
    </div>
</footer>
</body>
</html>
